/**
* @Description:修改表单组件
* @author NewLore1
* @Date 2020/12/01/10:51
* @LastEditors: 乔
* @LastEditTime: 2020/12/01/10:51
**/
<!-- 修改表单 -->
<template>
  <!-- editForm -->
  <el-form ref="editForm" class="myTreeClass" :size="size" :label-width="labelWidth" :model="editData" :rules="editRules" :inline="true">
    <!-- :style="{ width:item.itemWidth? `calc(${item.itemWidth} - 10px)`:`calc(50% - 10px)`}"  -->
    <!-- v-show="item.isShow ? (item.isShow === 'true' ? true : false) : true" -->

    <!--第一种展示方式 查看模式 -->
    <div v-if="editCfg.isSee===true">
      <el-form-item v-for="item in editCfg.column" v-show="item.isShow ? (item.isShow === 'true' ? true : false) : true" :key="item.label" :label="item.label+':'" :prop="item.prop">
        <div :style="{ width: item.width ? item.width : '100%' }">
          <div v-if="item.slot!=true" :style="{ width: item.width ? item.width : '100%' }">
            {{ editData[item.prop] }}
          </div>
          <!-- 自定义参数插槽，根据prop，slot定义  两种接收方式 -->
          <slot v-if="item.slot===true" :style="{ width: item.width ? item.width : '100%' }" :row="editData" :configData="item" :name="item.prop" />
        </div>
      </el-form-item>
      <!-- 预留的第一个 插槽 用于搜索 -->
      <el-form-item>
        <slot name="searchCard" />
      </el-form-item>
    </div>

    <!--第二种展示方式 添加修改模式  style="margin-bottom:-10px"-->
    <div v-if="editCfg.isSee!=true">
      <el-form-item v-for="item in editCfg.column" v-show="item.isShow ? (item.isShow === 'true' ? true : false) : true" :key="item.label" :label="item.label+':'" :prop="item.prop">
        <div :style="{ width: item.width ? item.width : '100%' }">
          <!-- 自定义参数插槽，根据prop，slot定义  两种接收方式 -->
          <slot v-if="item.slot===true" :style="{ width: item.width ? item.width : '100%' }" :row="editData" :configData="item" :name="item.prop" />

          <!-- 以下为引用element组件,或自定义下拉树,谨慎修改 -->
          <!-- <el-popover ref="popovers" :trigger="click" placement="right" title="标题" width="200" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
          <div slot="reference"> 23232</div> -->
          <!-- 文本输入框 -->
          <el-input
            v-if="item.type === 'input'&&item.slot!=true"
            v-model="editData[item.prop]"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :style="{ width: item.width ? item.width : '100%' }"
            :maxlength="item.maxlength"
            :minlength="item.minlength"
            :show-word-limit="item.isShowWord"
            clearable
            @clear="item.clear && item.clear(editData[item.prop])"
            @input.native="item.input && item.input(editData[item.prop])"
            @focus="item.focus && item.focus(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"
          >
            <!-- 头部添加 -->
            <template v-if="item.prependValue!=''&&item.prependValue!=null" slot="prepend">{{ item.prependValue }}</template>
            <!-- 尾部添加 -->
            <template v-if="item.appendValue!=''&&item.appendValue!=null" slot="append">{{ item.prependValue }}</template>
          </el-input>

          <!-- 数字输入框 -->
          <el-input
            v-if="item.type === 'number'&&item.slot!=true"
            v-model="editData[item.prop]"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :style="{ width: item.width ? item.width : '100%' }"
            :maxlength="item.maxlength"
            :minlength="item.minlength"
            :show-word-limit="item.isShowWord"
            type="number"
            clearable
            @clear="item.clear && item.clear(editData[item.prop])"
            @input.native="item.input && item.input(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"
          >
            <!-- 头部添加 -->
            <template v-if="item.prependValue!=''&&item.prependValue!=null" slot="prepend">{{ item.prependValue }}</template>
            <!-- 尾部添加 -->
            <template v-if="item.appendValue!=''&&item.appendValue!=null" slot="append">{{ item.prependValue }}</template>
          </el-input>

          <!-- 密码输入框 -->
          <el-input
            v-if="item.type === 'password'&&item.slot!=true"
            v-model="editData[item.prop]"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :style="{ width: item.width ? item.width : '100%' }"
            :maxlength="item.maxlength"
            :minlength="item.minlength"
            :show-word-limit="item.isShowWord"
            show-password
            type="number"
            clearable
            @clear="item.clear && item.clear(editData[item.prop])"
            @input.native="item.input && item.input(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"
          >
            <!-- 头部添加 -->
            <template v-if="item.prependValue!=''&&item.prependValue!=null" slot="prepend">{{ item.prependValue }}</template>
            <!-- 尾部添加 -->
            <template v-if="item.appendValue!=''&&item.appendValue!=null" slot="append">{{ item.prependValue }}</template>
          </el-input>

          <!-- 文本域 -->
          <el-input
            v-if="item.type === 'textarea'&&item.slot!=true"
            v-model="editData[item.prop]"
            :clearable="item.isClearable"
            :placeholder="item.placeholder"
            :rows="item.row"
            :maxlength="item.maxlength"
            :minlength="item.minlength"
            :show-word-limit="item.isShowWord"
            :disabled="item.disabled"
            :style="{ width: item.width ? item.width : '100%' }"
            type="textarea"
            @clear="item.clear && item.clear(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"
            @focus="item.focus && item.focus(editData[item.prop])"
          />
          <!-- 下拉框  -->
          <el-select
            v-if="item.type === 'select'&&item.slot!=true"
            v-model="editData[item.prop]"
            :collapse-tags="item.isCollapseTags"
            :multiple="item.isMultiple"
            :placeholder="item.placeholder"
            :filterable="item.filterable"
            :clearable="item.isClearable"
            :allow-create="item.isAllowCreate"
            :reserve-keyword="item.reserveKeyword"
            :remote="item.isRemote"
            :loading="item.loading"
            :remote-method="item.remoteMethod"
            :style="{ width: item.width ? item.width : '100%' }"
            :disabled="item.disabled"
            @clear="item.clear && item.clear(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"
          >
            <div v-if="item.prop === 'community'">
              <el-option v-for="op in communityData" :key="op.id" :style="{ width: item.width ? item.width : '100%' }" :label="op.parkName" :disabled="op.disabled" :value="op.parkId" />
            </div>
            <div v-else-if="item.mySelf">
              <el-option v-for="op in item.options" :key="op.value" :label="op.label" :style="{ width: item.width ? item.width : '100%' }" :disabled="op.disabled" :value="op.value">
                <span style="float: left">{{ op.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ op.mySelf }}</span>
              </el-option>
            </div>
            <div v-else>
              <el-option v-for="op in item.options" :key="op.value" :disabled="op.disabled" :style="{ width: item.width ? item.width : '100%' }" :label="op.label" :value="op.value" />
            </div>
            <el-pagination v-show="item.isPage" :current-page="item.currentPage ? item.currentPage : 1" :total="item.totalPage ? item.totalPage : 0" :page-size="item.pageSize ? item.pageSize : 10" small layout="prev, pager, next" @current-change="handleCurrentChange" />
          </el-select>

          <!-- 下拉树 引用的公用组件-->
          <treeselect
            v-if="item.type === 'selectTree'&&item.slot!=true"
            v-model="editData[item.prop]"
            :disabled="item.disabled"
            :options="item.options"
            :placeholder="item.placeholder"
            :load-options="loadOptions"
            :normalizer="normalizer"
            :style="{ width: item.width, maxHeight: 500,height:'10px' }"
            no-results-text="暂无结果"
            value="新增分类"
            size="mini"
            style="width: 100%;height: 10px;z-index:9999;"
            @select="item.change"
          />

          <!-- 下拉树组件 自定义组件 -->
          <treeSelect
            v-if="item.type === 'comSelectTree'&&item.slot!=true"
            v-model="editData[item.prop]"
            :value="editData[item.prop]"
            :disabled="item.disabled"
            :options="item.options"
            :placeholder="item.placeholder"
            :props="item.setUpsProps"
            :style="{ width: item.width ? item.width : '100%' }"
            :accordion="true"
            @getValue="item.getValue($event)"
            @clear="item.clear && item.clear(editData[item.prop])"
            @click.native="item.click && item.click(editData[item.prop])"
          />
          <!-- <el-input v-if="item.type === 'comSelectTree'" :value="editData[item.prop]"></el-input> -->
          <!-- @getValue="getValue($event)" -->
          <!-- 关键字搜索 -->
          <el-autocomplete v-if="item.type === 'autocomplete'&&item.slot!=true" v-model="editData[item.prop]" :fetch-suggestions="item.querySearchAsync" :placeholder="item.placeholder" :style="{ width: item.width ? item.width : '100%' }" size="mini" @select="item.handleSelect" @input="e => (editData[item.prop] = item.filterContent(e))" />
          <!-- 单选 -->
          <el-radio-group v-if="item.type === 'radio'&&item.slot!=true" v-model="editData[item.prop]" :disabled="item.disabled" @change="item.change && item.change(editData[item.prop])">
            <el-radio v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{
              ra.label
            }}</el-radio>
          </el-radio-group>

          <!-- 单选按钮 -->
          <el-radio-group v-if="item.type === 'radioButton'&&item.slot!=true" v-model="editData[item.prop]" :disabled="item.disabled" @change="item.change && item.change(editData[item.prop])">
            <el-radio-button v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio-button>
          </el-radio-group>
          <!-- 复选框 -->
          <el-checkbox-group v-if="item.type === 'checkbox'&&item.slot!=true" v-model="editData[item.prop]" :disabled="item.disabled" @change="item.change && item.change(editData[item.prop])">
            <el-checkbox v-for="ch in item.checkboxs" :key="ch.value" :label="ch.value">{{ ch.label }}</el-checkbox>
          </el-checkbox-group>

          <!-- 计数器 -->
          <el-input-number v-if="item.type === 'inputNumber'&&item.slot!=true" v-model="editData[item.prop]" :min="item.min" :max="item.max" :label="item.label" :style="{ width: item.width ? item.width : '100%' }" @change="item.change && item.change(editData[item.prop])" />

          <!-- 日期 -->
          <el-date-picker v-if="item.type === 'date'&&item.slot!=true" v-model="editData[item.prop]" :style="{ width: item.width ? item.width : '100%' }" :disabled="item.disabled" :placeholder="item.placeholder" value-format="yyyy-MM-dd" @change="item.change && item.change(editData[item.prop])" />
          <!-- 年份 -->
          <el-date-picker v-if="item.type === 'year'&&item.slot!=true" v-model="editData[item.prop]" :style="{ width: item.width ? item.width : '100%' }" :disabled="item.disabled" :placeholder="item.placeholder" type="year" value-format="yyyy" @change="item.change && item.change(editData[item.prop])" />

          <!-- 月份 -->
          <el-date-picker v-if="item.type === 'month'&&item.slot!=true" v-model="editData[item.prop]" :style="{ width: item.width ? item.width : '100%' }" :disabled="item.disabled" :placeholder="item.placeholder" type="month" value-format="MM" @change="item.change && item.change(editData[item.prop])" />

          <!-- 任意时间    value-format="yyyy-MM-dd HH:mm:ss"-->
          <el-time-picker v-if="item.type === 'timePicker'&&item.slot!=true" v-model="editData[item.prop]" :style="{ width: item.width ? item.width : '100%' }" :format="item.format" :value-format="item.valueFormat" :picker-options="item.pickerOptions" :placeholder="item.placeholder" />
          <!-- 固定时间段 时分-->
          <el-time-select v-if="item.type === 'time'&&item.slot!=true" v-model="editData[item.prop]" :style="{ width: item.width ? item.width : '100%' }" :picker-options="item.pickerOptions" :format="item.format" :placeholder="item.placeholder" :disabled="item.disabled" @change="item.change && item.change(editData[item.prop])" />
          <!-- 日期时间 -->
          <el-date-picker
            v-if="item.type === 'dateTime'&&item.slot!=true"
            v-model="editData[item.prop]"
            :style="{ width: item.width ? item.width : '100%' }"
            :format="item.format"
            :value-format="item.valueFormat"
            :default-time="item.default"
            :picker-options="item.pickerOptions"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            type="datetime"
            @change="item.change && item.change(editData[item.prop])"
          />
          <!-- 评分 -->
          <el-rate v-if="item.type === 'rate'&&item.slot!=true" :colors="item.colors" :icon-classes="item.iconClasses" :texts="item.texts" :value="score" :show-text="item.showText" :disabled="scoreDisabled" @change="changeScore" />
          <!-- 滑块 -->
          <!-- <el-slider v-if="item.type==='Slider'&&item.slot!=true" v-model="editData[item.prop]"></el-slider> -->
          <!-- 开关 -->
          <el-switch v-if="item.type === 'switch'&&item.slot!=true" v-model="editData[item.prop]" :style="{ width: item.width ? item.width : '100%' }" :active-text="item.options[0]" :inactive-text="item.options[1]" :disabled="item.disabled" @change="item.change && item.change(editData[item.prop])" />

          <!-- 日期时间范围 datetimerange-->
          <el-date-picker
            v-if="item.type === 'dateTimeRange'&&item.slot!=true"
            v-model="editData[item.prop]"
            :style="{ width: item.width ? item.width : '100%' }"
            :disabled="item.disabled"
            :placeholder="item.placeholder"
            :type="'datetimerange'"
            :picker-options="pickerOptionsRange"
            :default-time="['00:00:00', '23:59:59']"
            size="mini"
            clearable
            start-placeholder="开始日期"
            range-separator="至"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @clear="item.clear && item.clear(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"
          />

          <!-- 天数范围 daterange -->
          <el-date-picker
            v-if="item.type === 'dateRange'&&item.slot!=true"
            v-model="editData[item.prop]"
            :style="{ width: item.width ? item.width : '100%' }"
            :disabled="item.disabled"
            :placeholder="item.placeholder"
            :type="'daterange'"
            :picker-options="pickerOptionsRangeDay"
            :default-time="['00:00:00', '23:59:59']"
            size="mini"
            clearable
            start-placeholder="开始日期"
            range-separator="至"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @clear="item.clear && item.clear(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"
          />

          <!-- monthrange 月份范围 -->
          <el-date-picker
            v-if="item.type === 'monthRange'&&item.slot!=true"
            v-model="editData[item.prop]"
            :style="{ width: item.width ? item.width : '100%' }"
            :disabled="item.disabled"
            :placeholder="item.placeholder"
            :type="'monthrange'"
            :picker-options="pickerOptionsRangeMonth"
            size="mini"
            clearable
            start-placeholder="开始日期"
            range-separator="至"
            end-placeholder="结束日期"
            value-format="yyyy-MM"
            @clear="item.clear && item.clear(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"
          />
        </div>
      </el-form-item>
      <!-- 预留的第一个 插槽 用于搜索 -->
      <el-form-item>
        <slot name="searchCard" />
      </el-form-item>
      <!-- 预留的第二个 尾部追加 tailTwoCard -->
      <el-form-item>
        <slot :row="editData" name="tailTwoCard" />
      </el-form-item>
    </div>

    <!-- 预留的第三个 尾部追加 tailThreeCard -->
    <slot :row="editData" name="tailThreeCard" />

  </el-form>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
import treeSelect from '@/components/form-muster/treeSelect';
import { pickerOptionsRange, pickerOptionsRangeDay, pickerOptionsRangeMonth } from '@/const/components/pickerOptions'; // 自定义下拉树
// import { getLoadUserInfo } from '@/api/organization'

export default {
  components: {
    Treeselect,
    treeSelect
  },
  props: {
    labelWidth: {
      type: String,
      default: '100px'
    },
    scoreDisabled: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'mini'
    },
    editCfg: {
      type: Array,
      default: () => {}
      // default: () => []
    },
    editData: {
      type: Object,
      default: () => {}
    },
    editRules: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      editCfg: this.editCfg,
      myEditData: this.editData,
      that: this,
      communityData: [],
      score: 5,
      // 时间范围相关
      pickerOptionsRange: pickerOptionsRange,
      pickerOptionsRangeMonth: pickerOptionsRangeMonth,
      pickerOptionsRangeDay: pickerOptionsRangeDay,

      //* *********公用下拉树相关***********
      defaultProps: {
        children: 'children',
        // label: 'title'
        label: 'name'
      },
      normalizer(node) {
        // 去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          // 将name转换成必填的label键
          label: node.name, //
          children: node.children
        };
      }
    };
  },
  mounted() {
    this.editCfg.column.forEach(val => {
      if (val.prop === 'community') {
        this.getCommunity(val);
      }
    });
  },
  methods: {
    //* ***********日期相关********************
    // onPick: dateRange => {
    //     console.log('dateRange1111:', dateRange);
    //     if (!dateRange.maxDate) {
    //         return;
    //     }
    //     this.getTimeChange(dateRange);
    //     console.log('dateRange,maxDate222:', dateRange);
    //     this.editData.planStart = dateRange.maxDate;
    //     this.editData.planEnd = dateRange.maxDate;
    // }
    // getTimeChange(time) {
    //     // const self = this;
    //     console.log('选中日期：', time);
    // },

    // 获取自定义点击树的取log值
    getValue(value) {
      console.log('获取自定义点击树的取值:', value);
      // this.values = value;
    },

    loadOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        switch (parentNode.id) {
          case 'success': {
            // simulateAsyncOperation(() => {
            //     parentNode.children = [
            //         {
            //             id: 'child',
            //             label: 'Child option'
            //         }
            //     ];
            //     callback();
            // });
            break;
          }
          case 'no-children': {
            // simulateAsyncOperation(() => {
            //     parentNode.children = [];
            //     callback();
            // });
            break;
          }
          case 'failure': {
            // simulateAsyncOperation(() => {
            //     callback(new Error('Failed to load options: network error.'));
            // });
            break;
          }
          default: /* empty */
        }
      }
    },
    selectTree(data1) {
      this.$emit('selectTree', data1.id);
    },
    // 重置
    rest() {
      this.$refs.editForm.resetFields();
    },
    changeScore(val) {
      this.score = val;
      this.$emit('changeScore', val);
    },
    // 得到数据
    getCommunity(val) {
      //   getLoadUserInfo().then(data => {
      //     if (data.guardParkList.length > 0) {
      //       this.communityData = data.guardParkList
      //       if (!val.isMultiple) {
      //         if (val.isShowAllCommunity) {
      //           if (data.guardParkList.length > 1) {
      //             const allCommunity = {}
      //             allCommunity.id = '123'
      //             allCommunity.parkName = '全部社区'
      //             const parkIds = this.$route.query.parkId
      //             allCommunity.parkId = parkIds
      //             this.communityData.unshift(allCommunity)
      //           }
      //         }
      //         this.editData.community = this.communityData[0].parkId
      //         this.$emit('getCommunity', data)
      //       } else {
      //         this.communityData.forEach((val, index) => {
      //           this.editData.community.push(val.parkId)
      //           if (index === this.communityData.length - 1) {
      //             this.$emit('getCommunity', data)
      //           }
      //         })
      //       }
      //     } else {
      //       this.editData.communityIds = '暂无小区'
      //     }
      //   })
    },
    // 页码修改
    handleCurrentChange(val) {
      this.$emit('refreshPage', val);
    }
    // getThat(){
    //     this.$emit('that',this)
    // }
  }
};
</script>
<style lang="scss">
.vue-treeselect__control {
  height: 10px !important;
}
</style>
<style scoped lang="stylus"></style>
